<!-- 03VueInstance.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
	<link rel="stylesheet" href="./css/common.css"/>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	<!-- <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script> -->
	<!-- <script src="https://cdn.bootcss.com/lodash.js/4.17.15/lodash.min.js"></script> -->
</head>
<body>
	<h3>显示过滤/排序后的结果</h3>
	<div id="demo" class="div-demo-block">
		<p>过滤前</p>
		<ul>
			<li v-for="item in numbers">
				{{ item }}
			</li>
		</ul>
		<p>过滤后(计算属性)</p>
		<ul>
			<li v-for="item in evenNumbers">
				{{ item }}
			</li>
		</ul>
		<p>过滤后(嵌套循环中可以使用方法来实现)</p>
		<ul>
			<li v-for="item in funcEven(numbers)">
				{{ item }}
			</li>
		</ul>
		<p>v-for 也可以接受整数。  在这种情况下，它会把模板重复对应次数。</p>
		<ul>
			<li v-for="item in 10">
				{{ item }}
			</li>
		</ul>
	</div>
	
    <script>
        var demo = new Vue({
            el: '#demo',
            data: {
				numbers: [1, 2, 3, 4, 5]
            }, 
			computed: {
				evenNumbers: function() {
					return this.numbers.filter(function(val){
						return val % 2 === 0
					})
				}
			},
			methods: {
				funcEven: function(numbers) {
					return numbers.filter(function(num){
						return num % 2 === 0
					})
				}
			}
        });
    </script>
</body>
</html>